<template>
  <div>
    <!-- 修改电影的大表单 -->
    <el-form 
      ref="form" :model="form" :rules="rules"
      label-width="140px" style="width:700px;">
      <el-form-item label="品牌" prop="brand">
        <el-input placeholder="请输入商品品牌" v-model="form.brand"/>
      </el-form-item>
      <el-form-item label="主图" prop="mainPic">
        <el-upload
          class="avatar-uploader"
          :action="`${UPLOADURL}/upload`"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :before-upload="beforeUpload">
          <img v-if="form.mainPic" 
          :src="form.mainPic[form.mainPic.search(/http/g)]=='h'?form.mainPic:A.HYRJURL+'/'+form.mainPic"  class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="简短标题" prop="shortTitle">
        <el-input placeholder="请输入简短标题" v-model="form.shortTitle"/>
      </el-form-item>
      <el-form-item label="商品名称" prop="goodsName">
        <el-input placeholder="请输入商品名称" v-model="form.goodsName"/>
      </el-form-item>
      <el-form-item label="原价" prop="originalPrice">
        <el-input placeholder="请输入商品原价" v-model="form.originalPrice"/>
      </el-form-item>
      <el-form-item label="折扣率" prop="discount">
        <el-input placeholder="请输入折扣" v-model="form.discount"/>
      </el-form-item>
      <el-form-item label="已售数量" prop="soldCount">
        <el-input placeholder="请输入已售数量" v-model="form.soldCount"/>
      </el-form-item>
      <el-form-item v-show="false" label="颜色分类" prop="descriptions">
        <el-input placeholder="请输入商品颜色分类" v-model="form.descriptions"/>
      </el-form-item>
      <el-form-item label="详细描述" prop="details">
        <el-upload
        :action="`${UPLOADURL}/upload`"
        list-type="picture-card"

        :on-remove="handleRemove"
        :on-success="handleSuccess"
        >
        <i class="el-icon-plus"></i>
       </el-upload>
<!-- <el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="form.details" alt="">
</el-dialog> -->
      </el-form-item>
      <el-form-item v-model="form.details" label="详细描述预览">
         <div  v-html="form.details">
       
        </div> 

      </el-form-item>
      <el-form-item label="是否为节日精选">
        <el-radio v-model="form.isFestivalSelection" label="1">是</el-radio>
        <el-radio v-model="form.isFestivalSelection" label="0">否</el-radio>
      </el-form-item>
      <el-form-item label="是否为品牌精选">
        <el-radio v-model="form.isBrandSelection" label="1">是</el-radio>
        <el-radio v-model="form.isBrandSelection" label="0">否</el-radio>
      </el-form-item>
      <el-form-item label="所属类别" prop="typeId">
        <el-radio v-model="form.typeId" label="1">折扣</el-radio>
        <el-radio v-model="form.typeId" label="2">节日精选</el-radio>
        <el-radio v-model="form.typeId" label="3">品牌精选</el-radio>
        <el-radio v-model="form.typeId" label="4">盆栽</el-radio>
        <el-radio v-model="form.typeId" label="5">花束</el-radio>
        <el-radio v-model="form.typeId" label="6">春季开花</el-radio>
        <el-radio v-model="form.typeId" label="7">夏季开花</el-radio>
        <el-radio v-model="form.typeId" label="8">秋季开花</el-radio>
        <el-radio v-model="form.typeId" label="9">冬季开花</el-radio>
      </el-form-item>
      <el-form-item label="是否下架" prop="disabled">
      <el-switch 
          v-model="form.disabled"
          :active-value="0" :inactive-value="1">
      </el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认更新</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    
  </div>
</template>

<script>
import httpApi from '@/http';
import A from '@/http/BaseUrl'
export default {
  data() {
    return {
      fileList: [],
      fileList1:[],
      A,
      loading: false, // 描述当前列表是否正在加载中
      flowers: [],     // 保存模糊查询演员列表后的结果
      types: [],      // 存储所有的电影类型 
      form: {
        typeId: '1',
        mainPic: '',
        shortTitle: '',
        goodsName: '',
        descriptions: '',
        originalPrice: '',
        discount: '',
        soldCount: '',
        brand:'',
        details:'',
        isFestivalSelection:'',
        isBrandSelection:'',
        disabled:1,
      },
      rules: {
        typeId: [{required:true, message:'必填项', trigger: 'blur'}],
        shortTitle: [{required:true, message:'必填项', trigger: 'blur'}],
        mainPic: [{required:true, message:'必填项', trigger: 'change'}],
        goodsName: [{required:true, message:'必填项', trigger: 'blur'}],
        descriptions: [{required:true, message:'必填项', trigger: 'blur'}],
        originalPrice: [{required:true, message:'必填项', trigger: 'blur'}],
        descriptions: [{required:true, message:'必填项', trigger: 'blur'}],
        discount: [{required:true, message:'必填项', trigger: 'blur'}],
        soldCount: [{required:true, message:'必填项', trigger: 'blur'}],
        brand: [{required:true, message:'必填项', trigger: 'blur'}],
        isFestivalSelection: [{required:true, message:'必填项', trigger: 'blur'}],
        isBrandSelection: [{required:true, message:'必填项', trigger: 'blur'}],
        disabled: [{required:true, message:'必填', trigger:'blur'}],
      }
    }
  },
  methods: {
    handleRemove(file, fileList) {
        console.log(file);
        //this.form.details = '';
        this.form.details = this.form.details.replace(`<div><img src="${file.response.data}"/></div>`,'');
        console.log(this.form.details);
      },
 
      handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);
       //this.form.details = file.data;
         this.form.details='<div class="gdetails">'+fileList.map(value=>`<div><img src="${value.response.data}"/></div>`).join('')+'</div>'
        this.dialogVisible = true;
      },
    /** 提交表单 */
    onSubmit(){
      this.$refs['form'].validate(valid=>{
        if(valid){
          console.log(this.form)
          // 发送请求，提交数据
          httpApi.MallApi.updateDetail(this.form).then(res=>{
            console.log('dgdfgdfgdfg');
            console.log('修改成功', res)
            if(res.data.code==200){
              this.$message({
                message:'恭喜您，花卉更新成功', 
                type:'success'
              })
              // 跳转到花卉列表页：/home/flower-list
              this.$router.push('/home/flower-list')
            }
          })
        }
      })
    },

    // 处理上传成功后的业务
    uploadSuccess(res, file) {
      console.log(res)
      // 将上传成功后的图片访问路径，存入form对象
      this.form.mainPic = res.data
    },

    // 处理上传之前的格式大小验证
    beforeUpload(file) {
      const isJPG = 
        file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/webp';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG|PNG|WEBP 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },

  /** 生命周期，挂载完毕后执行 */
  mounted(){
    // 获取参数gid，加载当前选中的花卉的详细信息（发请求）
    let gid = this.$route.params.gid // 获取电影ID
    httpApi.MallApi.queryDetailByGid({gid}).then(res=>{
     console.log('通过gid查询花卉详情', res)
      this.form = res.data.data[0] 
     // console.log(res.data.data[0].details);
       this.form.isFestivalSelection = this.form.isFestivalSelection+''
       this.form.isBrandSelection = this.form.isBrandSelection+''
       this.form.typeId = this.form.typeId+''
       this.form.details=this.form.details[this.form.details.search(/http/g)]=='h'?this.form.details:this.form.details.replaceAll('img/',this.A.HYRJURL+'/img/')
     //  console.log(this.form.details);
    })
  }
};
</script>

<style lang="scss" scoped></style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    display: block;
  }
  .gdetails img{
    width: 400px;
    height: 400px;
  }
</style>

